
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont">&#xedb1;</i>
                    <div class="name">zoom_out_map</div>
                    <div class="code">&amp;#xedb1;</div>
                    <div class="fontclass">.zoomoutmap</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeda6;</i>
                    <div class="name">web_asset</div>
                    <div class="code">&amp;#xeda6;</div>
                    <div class="fontclass">.webasset</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeda7;</i>
                    <div class="name">weekend</div>
                    <div class="code">&amp;#xeda7;</div>
                    <div class="fontclass">.weekend</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeda8;</i>
                    <div class="name">whatshot</div>
                    <div class="code">&amp;#xeda8;</div>
                    <div class="fontclass">.whatshot</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed93;</i>
                    <div class="name">wb_sunny</div>
                    <div class="code">&amp;#xed93;</div>
                    <div class="fontclass">.wbsunny</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed94;</i>
                    <div class="name">wc</div>
                    <div class="code">&amp;#xed94;</div>
                    <div class="fontclass">.wc</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed95;</i>
                    <div class="name">web</div>
                    <div class="code">&amp;#xed95;</div>
                    <div class="fontclass">.web</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xea40;</i>
                    <div class="name">add_circle</div>
                    <div class="code">&amp;#xea40;</div>
                    <div class="fontclass">.addcircle</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xea41;</i>
                    <div class="name">add_circle_outline</div>
                    <div class="code">&amp;#xea41;</div>
                    <div class="fontclass">.addcircleoutline</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xea38;</i>
                    <div class="name">account_box</div>
                    <div class="code">&amp;#xea38;</div>
                    <div class="fontclass">.accountbox</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xea39;</i>
                    <div class="name">account_circle</div>
                    <div class="code">&amp;#xea39;</div>
                    <div class="fontclass">.accountcircle</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xea3d;</i>
                    <div class="name">add_alarm</div>
                    <div class="code">&amp;#xea3d;</div>
                    <div class="fontclass">.addalarm</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xea45;</i>
                    <div class="name">access_alarm</div>
                    <div class="code">&amp;#xea45;</div>
                    <div class="fontclass">.accessalarm</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xea82;</i>
                    <div class="name">backspace</div>
                    <div class="code">&amp;#xea82;</div>
                    <div class="fontclass">.backspace</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeaa2;</i>
                    <div class="name">build</div>
                    <div class="code">&amp;#xeaa2;</div>
                    <div class="fontclass">.build</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xea9c;</i>
                    <div class="name">brightness_high</div>
                    <div class="code">&amp;#xea9c;</div>
                    <div class="fontclass">.brightnesshigh</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xea9d;</i>
                    <div class="name">brightness_low</div>
                    <div class="code">&amp;#xea9d;</div>
                    <div class="fontclass">.brightnesslow</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeac3;</i>
                    <div class="name">chevron_left</div>
                    <div class="code">&amp;#xeac3;</div>
                    <div class="fontclass">.chevronleft</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeac4;</i>
                    <div class="name">chevron_right</div>
                    <div class="code">&amp;#xeac4;</div>
                    <div class="fontclass">.chevronright</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeab0;</i>
                    <div class="name">cancel</div>
                    <div class="code">&amp;#xeab0;</div>
                    <div class="fontclass">.cancel</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeac2;</i>
                    <div class="name">check_circle</div>
                    <div class="code">&amp;#xeac2;</div>
                    <div class="fontclass">.checkcircle</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xead3;</i>
                    <div class="name">check</div>
                    <div class="code">&amp;#xead3;</div>
                    <div class="fontclass">.check</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xead2;</i>
                    <div class="name">chat_bubble_outline</div>
                    <div class="code">&amp;#xead2;</div>
                    <div class="fontclass">.chatbubbleoutline</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xead6;</i>
                    <div class="name">colorize</div>
                    <div class="code">&amp;#xead6;</div>
                    <div class="fontclass">.colorize</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb0c;</i>
                    <div class="name">delete</div>
                    <div class="code">&amp;#xeb0c;</div>
                    <div class="fontclass">.delete</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb0b;</i>
                    <div class="name">dehaze</div>
                    <div class="code">&amp;#xeb0b;</div>
                    <div class="fontclass">.dehaze</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb4c;</i>
                    <div class="name">favorite</div>
                    <div class="code">&amp;#xeb4c;</div>
                    <div class="fontclass">.favorite</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb4a;</i>
                    <div class="name">fast_forward</div>
                    <div class="code">&amp;#xeb4a;</div>
                    <div class="fontclass">.fastforward</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb4b;</i>
                    <div class="name">fast_rewind</div>
                    <div class="code">&amp;#xeb4b;</div>
                    <div class="fontclass">.fastrewind</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb66;</i>
                    <div class="name">folder</div>
                    <div class="code">&amp;#xeb66;</div>
                    <div class="fontclass">.folder</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xebe1;</i>
                    <div class="name">laptop_chromebook</div>
                    <div class="code">&amp;#xebe1;</div>
                    <div class="fontclass">.laptopchromebook</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec42;</i>
                    <div class="name">navigation</div>
                    <div class="code">&amp;#xec42;</div>
                    <div class="fontclass">.navigation</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec4f;</i>
                    <div class="name">music_note</div>
                    <div class="code">&amp;#xec4f;</div>
                    <div class="fontclass">.musicnote</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec50;</i>
                    <div class="name">music_video</div>
                    <div class="code">&amp;#xec50;</div>
                    <div class="fontclass">.musicvideo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec51;</i>
                    <div class="name">my_location</div>
                    <div class="code">&amp;#xec51;</div>
                    <div class="fontclass">.mylocation</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec79;</i>
                    <div class="name">pause</div>
                    <div class="code">&amp;#xec79;</div>
                    <div class="fontclass">.pause</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xecaa;</i>
                    <div class="name">play_arrow</div>
                    <div class="code">&amp;#xecaa;</div>
                    <div class="fontclass">.playarrow</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xecf9;</i>
                    <div class="name">settings</div>
                    <div class="code">&amp;#xecf9;</div>
                    <div class="fontclass">.settings</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed75;</i>
                    <div class="name">tune</div>
                    <div class="code">&amp;#xed75;</div>
                    <div class="fontclass">.tune</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed5a;</i>
                    <div class="name">textsms</div>
                    <div class="code">&amp;#xed5a;</div>
                    <div class="fontclass">.textsms</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed57;</i>
                    <div class="name">touch_app</div>
                    <div class="code">&amp;#xed57;</div>
                    <div class="fontclass">.touchapp</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed5e;</i>
                    <div class="name">thumb_up</div>
                    <div class="code">&amp;#xed5e;</div>
                    <div class="fontclass">.thumbup</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed5d;</i>
                    <div class="name">thumb_down</div>
                    <div class="code">&amp;#xed5d;</div>
                    <div class="fontclass">.thumbdown</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed6b;</i>
                    <div class="name">verified_user</div>
                    <div class="code">&amp;#xed6b;</div>
                    <div class="fontclass">.verifieduser</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed9e;</i>
                    <div class="name">vpn_key</div>
                    <div class="code">&amp;#xed9e;</div>
                    <div class="fontclass">.vpnkey</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed9f;</i>
                    <div class="name">vpn_lock</div>
                    <div class="code">&amp;#xed9f;</div>
                    <div class="fontclass">.vpnlock</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeda9;</i>
                    <div class="name">wifi</div>
                    <div class="code">&amp;#xeda9;</div>
                    <div class="fontclass">.wifi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeda0;</i>
                    <div class="name">warning</div>
                    <div class="code">&amp;#xeda0;</div>
                    <div class="fontclass">.warning</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed58;</i>
                    <div class="name">toys</div>
                    <div class="code">&amp;#xed58;</div>
                    <div class="fontclass">.toys</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeca5;</i>
                    <div class="name">power_settings_new</div>
                    <div class="code">&amp;#xeca5;</div>
                    <div class="fontclass">.powersettingsnew</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xecab;</i>
                    <div class="name">play_circle_filled</div>
                    <div class="code">&amp;#xecab;</div>
                    <div class="fontclass">.playcirclefilled</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xecac;</i>
                    <div class="name">play_circle_outline</div>
                    <div class="code">&amp;#xecac;</div>
                    <div class="fontclass">.playcircleoutline</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xecad;</i>
                    <div class="name">play_for_work</div>
                    <div class="code">&amp;#xecad;</div>
                    <div class="fontclass">.playforwork</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec91;</i>
                    <div class="name">picture_as_pdf</div>
                    <div class="code">&amp;#xec91;</div>
                    <div class="fontclass">.pictureaspdf</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec66;</i>
                    <div class="name">pause_circle_filled</div>
                    <div class="code">&amp;#xec66;</div>
                    <div class="fontclass">.pausecirclefilled</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec67;</i>
                    <div class="name">pause_circle_outline</div>
                    <div class="code">&amp;#xec67;</div>
                    <div class="fontclass">.pausecircleoutline</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec19;</i>
                    <div class="name">looks_6</div>
                    <div class="code">&amp;#xec19;</div>
                    <div class="fontclass">.looks6</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec18;</i>
                    <div class="name">looks_5</div>
                    <div class="code">&amp;#xec18;</div>
                    <div class="fontclass">.looks5</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec17;</i>
                    <div class="name">looks_4</div>
                    <div class="code">&amp;#xec17;</div>
                    <div class="fontclass">.looks4</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec16;</i>
                    <div class="name">looks_3</div>
                    <div class="code">&amp;#xec16;</div>
                    <div class="fontclass">.looks3</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeba5;</i>
                    <div class="name">gps_fixed</div>
                    <div class="code">&amp;#xeba5;</div>
                    <div class="fontclass">.gpsfixed</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb6d;</i>
                    <div class="name">fingerprint</div>
                    <div class="code">&amp;#xeb6d;</div>
                    <div class="fontclass">.fingerprint</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb69;</i>
                    <div class="name">filter_tilt_shift</div>
                    <div class="code">&amp;#xeb69;</div>
                    <div class="fontclass">.filtertiltshift</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb70;</i>
                    <div class="name">flare</div>
                    <div class="code">&amp;#xeb70;</div>
                    <div class="fontclass">.flare</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb71;</i>
                    <div class="name">flash_auto</div>
                    <div class="code">&amp;#xeb71;</div>
                    <div class="fontclass">.flashauto</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb72;</i>
                    <div class="name">flash_off</div>
                    <div class="code">&amp;#xeb72;</div>
                    <div class="fontclass">.flashoff</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb73;</i>
                    <div class="name">flash_on</div>
                    <div class="code">&amp;#xeb73;</div>
                    <div class="fontclass">.flashon</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb74;</i>
                    <div class="name">flight</div>
                    <div class="code">&amp;#xeb74;</div>
                    <div class="fontclass">.flight</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb4f;</i>
                    <div class="name">filter_drama</div>
                    <div class="code">&amp;#xeb4f;</div>
                    <div class="fontclass">.filterdrama</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb56;</i>
                    <div class="name">filter</div>
                    <div class="code">&amp;#xeb56;</div>
                    <div class="fontclass">.filter</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb57;</i>
                    <div class="name">filter_1</div>
                    <div class="code">&amp;#xeb57;</div>
                    <div class="fontclass">.filter1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb58;</i>
                    <div class="name">filter_2</div>
                    <div class="code">&amp;#xeb58;</div>
                    <div class="fontclass">.filter2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb59;</i>
                    <div class="name">filter_3</div>
                    <div class="code">&amp;#xeb59;</div>
                    <div class="fontclass">.filter3</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb5a;</i>
                    <div class="name">filter_4</div>
                    <div class="code">&amp;#xeb5a;</div>
                    <div class="fontclass">.filter4</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb5b;</i>
                    <div class="name">filter_5</div>
                    <div class="code">&amp;#xeb5b;</div>
                    <div class="fontclass">.filter5</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb5c;</i>
                    <div class="name">filter_6</div>
                    <div class="code">&amp;#xeb5c;</div>
                    <div class="fontclass">.filter6</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb5d;</i>
                    <div class="name">filter_7</div>
                    <div class="code">&amp;#xeb5d;</div>
                    <div class="fontclass">.filter7</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb5e;</i>
                    <div class="name">filter_8</div>
                    <div class="code">&amp;#xeb5e;</div>
                    <div class="fontclass">.filter8</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb5f;</i>
                    <div class="name">filter_9</div>
                    <div class="code">&amp;#xeb5f;</div>
                    <div class="fontclass">.filter9</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb60;</i>
                    <div class="name">filter_9_plus</div>
                    <div class="code">&amp;#xeb60;</div>
                    <div class="fontclass">.filter9plus</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb43;</i>
                    <div class="name">exposure_minus_1</div>
                    <div class="code">&amp;#xeb43;</div>
                    <div class="fontclass">.exposureminus1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb44;</i>
                    <div class="name">exposure_minus_2</div>
                    <div class="code">&amp;#xeb44;</div>
                    <div class="fontclass">.exposureminus2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb45;</i>
                    <div class="name">exposure_plus_1</div>
                    <div class="code">&amp;#xeb45;</div>
                    <div class="fontclass">.exposureplus1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb46;</i>
                    <div class="name">exposure_plus_2</div>
                    <div class="code">&amp;#xeb46;</div>
                    <div class="fontclass">.exposureplus2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb47;</i>
                    <div class="name">exposure_zero</div>
                    <div class="code">&amp;#xeb47;</div>
                    <div class="fontclass">.exposurezero</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb4d;</i>
                    <div class="name">favorite_outline</div>
                    <div class="code">&amp;#xeb4d;</div>
                    <div class="fontclass">.favoriteoutline</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb17;</i>
                    <div class="name">dialpad</div>
                    <div class="code">&amp;#xeb17;</div>
                    <div class="fontclass">.dialpad</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb14;</i>
                    <div class="name">done</div>
                    <div class="code">&amp;#xeb14;</div>
                    <div class="fontclass">.done</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb24;</i>
                    <div class="name">do_not_disturb</div>
                    <div class="code">&amp;#xeb24;</div>
                    <div class="fontclass">.donotdisturb</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb25;</i>
                    <div class="name">do_not_disturb_alt</div>
                    <div class="code">&amp;#xeb25;</div>
                    <div class="fontclass">.donotdisturbalt</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb0d;</i>
                    <div class="name">description</div>
                    <div class="code">&amp;#xeb0d;</div>
                    <div class="fontclass">.description</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb02;</i>
                    <div class="name">crop_free</div>
                    <div class="code">&amp;#xeb02;</div>
                    <div class="fontclass">.cropfree</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeaef;</i>
                    <div class="name">contact_mail</div>
                    <div class="code">&amp;#xeaef;</div>
                    <div class="fontclass">.contactmail</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeaf3;</i>
                    <div class="name">content_cut</div>
                    <div class="code">&amp;#xeaf3;</div>
                    <div class="fontclass">.contentcut</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeaf8;</i>
                    <div class="name">create</div>
                    <div class="code">&amp;#xeaf8;</div>
                    <div class="fontclass">.create</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeaf7;</i>
                    <div class="name">copyright</div>
                    <div class="code">&amp;#xeaf7;</div>
                    <div class="fontclass">.copyright</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeaf6;</i>
                    <div class="name">control_point_duplicate</div>
                    <div class="code">&amp;#xeaf6;</div>
                    <div class="fontclass">.controlpointduplicate</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeaf5;</i>
                    <div class="name">control_point</div>
                    <div class="code">&amp;#xeaf5;</div>
                    <div class="fontclass">.controlpoint</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeadf;</i>
                    <div class="name">cloud</div>
                    <div class="code">&amp;#xeadf;</div>
                    <div class="fontclass">.cloud</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeae0;</i>
                    <div class="name">cloud_circle</div>
                    <div class="code">&amp;#xeae0;</div>
                    <div class="fontclass">.cloudcircle</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeae1;</i>
                    <div class="name">cloud_done</div>
                    <div class="code">&amp;#xeae1;</div>
                    <div class="fontclass">.clouddone</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeae2;</i>
                    <div class="name">cloud_download</div>
                    <div class="code">&amp;#xeae2;</div>
                    <div class="fontclass">.clouddownload</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeae3;</i>
                    <div class="name">cloud_off</div>
                    <div class="code">&amp;#xeae3;</div>
                    <div class="fontclass">.cloudoff</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeae4;</i>
                    <div class="name">cloud_queue</div>
                    <div class="code">&amp;#xeae4;</div>
                    <div class="fontclass">.cloudqueue</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeae5;</i>
                    <div class="name">cloud_upload</div>
                    <div class="code">&amp;#xeae5;</div>
                    <div class="fontclass">.cloudupload</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xead1;</i>
                    <div class="name">chat_bubble</div>
                    <div class="code">&amp;#xead1;</div>
                    <div class="fontclass">.chatbubble</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xead4;</i>
                    <div class="name">check_box</div>
                    <div class="code">&amp;#xead4;</div>
                    <div class="fontclass">.checkbox</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xead5;</i>
                    <div class="name">check_box_outline_blank</div>
                    <div class="code">&amp;#xead5;</div>
                    <div class="fontclass">.checkboxoutlineblank</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeaa0;</i>
                    <div class="name">brush</div>
                    <div class="code">&amp;#xeaa0;</div>
                    <div class="fontclass">.brush</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xea9e;</i>
                    <div class="name">brightness_medium</div>
                    <div class="code">&amp;#xea9e;</div>
                    <div class="fontclass">.brightnessmedium</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeaac;</i>
                    <div class="name">brightness_5</div>
                    <div class="code">&amp;#xeaac;</div>
                    <div class="fontclass">.brightness5</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeaad;</i>
                    <div class="name">brightness_6</div>
                    <div class="code">&amp;#xeaad;</div>
                    <div class="fontclass">.brightness6</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeaab;</i>
                    <div class="name">brightness_4</div>
                    <div class="code">&amp;#xeaab;</div>
                    <div class="fontclass">.brightness4</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeaaa;</i>
                    <div class="name">brightness_3</div>
                    <div class="code">&amp;#xeaaa;</div>
                    <div class="fontclass">.brightness3</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeaa9;</i>
                    <div class="name">brightness_2</div>
                    <div class="code">&amp;#xeaa9;</div>
                    <div class="fontclass">.brightness2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeaa8;</i>
                    <div class="name">brightness_1</div>
                    <div class="code">&amp;#xeaa8;</div>
                    <div class="fontclass">.brightness1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xea89;</i>
                    <div class="name">block</div>
                    <div class="code">&amp;#xea89;</div>
                    <div class="fontclass">.block</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xea80;</i>
                    <div class="name">autorenew</div>
                    <div class="code">&amp;#xea80;</div>
                    <div class="fontclass">.autorenew</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xea7f;</i>
                    <div class="name">audiotrack</div>
                    <div class="code">&amp;#xea7f;</div>
                    <div class="fontclass">.audiotrack</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xea3b;</i>
                    <div class="name">add</div>
                    <div class="code">&amp;#xea3b;</div>
                    <div class="fontclass">.add</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xea3c;</i>
                    <div class="name">add_a_photo</div>
                    <div class="code">&amp;#xea3c;</div>
                    <div class="fontclass">.addaphoto</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xea6e;</i>
                    <div class="name">arrow_drop_down_circle</div>
                    <div class="code">&amp;#xea6e;</div>
                    <div class="fontclass">.arrowdropdowncircle</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xea6f;</i>
                    <div class="name">arrow_drop_up</div>
                    <div class="code">&amp;#xea6f;</div>
                    <div class="fontclass">.arrowdropup</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xea70;</i>
                    <div class="name">arrow_forward</div>
                    <div class="code">&amp;#xea70;</div>
                    <div class="fontclass">.arrowforward</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xea6b;</i>
                    <div class="name">arrow_back</div>
                    <div class="code">&amp;#xea6b;</div>
                    <div class="fontclass">.arrowback</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xea67;</i>
                    <div class="name">android</div>
                    <div class="code">&amp;#xea67;</div>
                    <div class="fontclass">.android</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xea64;</i>
                    <div class="name">album</div>
                    <div class="code">&amp;#xea64;</div>
                    <div class="fontclass">.album</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb99;</i>
                    <div class="name">forward_5</div>
                    <div class="code">&amp;#xeb99;</div>
                    <div class="fontclass">.forward5</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb9a;</i>
                    <div class="name">forward_10</div>
                    <div class="code">&amp;#xeb9a;</div>
                    <div class="fontclass">.forward10</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb9b;</i>
                    <div class="name">forward_30</div>
                    <div class="code">&amp;#xeb9b;</div>
                    <div class="fontclass">.forward30</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb9c;</i>
                    <div class="name">free_breakfast</div>
                    <div class="code">&amp;#xeb9c;</div>
                    <div class="fontclass">.freebreakfast</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeb8b;</i>
                    <div class="name">functions</div>
                    <div class="code">&amp;#xeb8b;</div>
                    <div class="fontclass">.functions</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xebaf;</i>
                    <div class="name">group_add</div>
                    <div class="code">&amp;#xebaf;</div>
                    <div class="fontclass">.groupadd</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeba1;</i>
                    <div class="name">get_app</div>
                    <div class="code">&amp;#xeba1;</div>
                    <div class="fontclass">.getapp</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xebc2;</i>
                    <div class="name">home</div>
                    <div class="code">&amp;#xebc2;</div>
                    <div class="fontclass">.home</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xebbf;</i>
                    <div class="name">highlight</div>
                    <div class="code">&amp;#xebbf;</div>
                    <div class="fontclass">.highlight</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xebc0;</i>
                    <div class="name">highlight_remove</div>
                    <div class="code">&amp;#xebc0;</div>
                    <div class="fontclass">.highlightremove</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xebc1;</i>
                    <div class="name">history</div>
                    <div class="code">&amp;#xebc1;</div>
                    <div class="fontclass">.history</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xebb8;</i>
                    <div class="name">headset</div>
                    <div class="code">&amp;#xebb8;</div>
                    <div class="fontclass">.headset</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xebb9;</i>
                    <div class="name">headset_mic</div>
                    <div class="code">&amp;#xebb9;</div>
                    <div class="fontclass">.headsetmic</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xebb5;</i>
                    <div class="name">image</div>
                    <div class="code">&amp;#xebb5;</div>
                    <div class="fontclass">.image</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xebd5;</i>
                    <div class="name">insert_emoticon</div>
                    <div class="code">&amp;#xebd5;</div>
                    <div class="fontclass">.insertemoticon</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xebb3;</i>
                    <div class="name">http</div>
                    <div class="code">&amp;#xebb3;</div>
                    <div class="fontclass">.http</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xebb4;</i>
                    <div class="name">https</div>
                    <div class="code">&amp;#xebb4;</div>
                    <div class="fontclass">.https</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xebda;</i>
                    <div class="name">keyboard_voice</div>
                    <div class="code">&amp;#xebda;</div>
                    <div class="fontclass">.keyboardvoice</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xebdc;</i>
                    <div class="name">label</div>
                    <div class="code">&amp;#xebdc;</div>
                    <div class="fontclass">.label</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xebdd;</i>
                    <div class="name">label_outline</div>
                    <div class="code">&amp;#xebdd;</div>
                    <div class="fontclass">.labeloutline</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xebdf;</i>
                    <div class="name">language</div>
                    <div class="code">&amp;#xebdf;</div>
                    <div class="fontclass">.language</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xebf0;</i>
                    <div class="name">local_airport</div>
                    <div class="code">&amp;#xebf0;</div>
                    <div class="fontclass">.localairport</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec0c;</i>
                    <div class="name">local_grocery_store</div>
                    <div class="code">&amp;#xec0c;</div>
                    <div class="fontclass">.localgrocerystore</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec0a;</i>
                    <div class="name">local_florist</div>
                    <div class="code">&amp;#xec0a;</div>
                    <div class="fontclass">.localflorist</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec05;</i>
                    <div class="name">local_bar</div>
                    <div class="code">&amp;#xec05;</div>
                    <div class="fontclass">.localbar</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec13;</i>
                    <div class="name">local_offer</div>
                    <div class="code">&amp;#xec13;</div>
                    <div class="fontclass">.localoffer</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec14;</i>
                    <div class="name">local_parking</div>
                    <div class="code">&amp;#xec14;</div>
                    <div class="fontclass">.localparking</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec02;</i>
                    <div class="name">local_phone</div>
                    <div class="code">&amp;#xec02;</div>
                    <div class="fontclass">.localphone</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec1f;</i>
                    <div class="name">local_taxi</div>
                    <div class="code">&amp;#xec1f;</div>
                    <div class="fontclass">.localtaxi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec1c;</i>
                    <div class="name">local_restaurant</div>
                    <div class="code">&amp;#xec1c;</div>
                    <div class="fontclass">.localrestaurant</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec1a;</i>
                    <div class="name">local_post_office</div>
                    <div class="code">&amp;#xec1a;</div>
                    <div class="fontclass">.localpostoffice</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec1d;</i>
                    <div class="name">local_see</div>
                    <div class="code">&amp;#xec1d;</div>
                    <div class="fontclass">.localsee</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec1e;</i>
                    <div class="name">local_shipping</div>
                    <div class="code">&amp;#xec1e;</div>
                    <div class="fontclass">.localshipping</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec2e;</i>
                    <div class="name">mode_edit</div>
                    <div class="code">&amp;#xec2e;</div>
                    <div class="fontclass">.modeedit</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec2f;</i>
                    <div class="name">looks_one</div>
                    <div class="code">&amp;#xec2f;</div>
                    <div class="fontclass">.looksone</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec30;</i>
                    <div class="name">looks_two</div>
                    <div class="code">&amp;#xec30;</div>
                    <div class="fontclass">.lookstwo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec31;</i>
                    <div class="name">loop</div>
                    <div class="code">&amp;#xec31;</div>
                    <div class="fontclass">.loop</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec72;</i>
                    <div class="name">pan_tool</div>
                    <div class="code">&amp;#xec72;</div>
                    <div class="fontclass">.pantool</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec71;</i>
                    <div class="name">palette</div>
                    <div class="code">&amp;#xec71;</div>
                    <div class="fontclass">.palette</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec6a;</i>
                    <div class="name">ondemand_video</div>
                    <div class="code">&amp;#xec6a;</div>
                    <div class="fontclass">.ondemandvideo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec6b;</i>
                    <div class="name">opacity</div>
                    <div class="code">&amp;#xec6b;</div>
                    <div class="fontclass">.opacity</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec6e;</i>
                    <div class="name">open_with</div>
                    <div class="code">&amp;#xec6e;</div>
                    <div class="fontclass">.openwith</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec89;</i>
                    <div class="name">person_add</div>
                    <div class="code">&amp;#xec89;</div>
                    <div class="fontclass">.personadd</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec88;</i>
                    <div class="name">person</div>
                    <div class="code">&amp;#xec88;</div>
                    <div class="fontclass">.person</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec8a;</i>
                    <div class="name">person_outline</div>
                    <div class="code">&amp;#xec8a;</div>
                    <div class="fontclass">.personoutline</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xec84;</i>
                    <div class="name">perm_identity</div>
                    <div class="code">&amp;#xec84;</div>
                    <div class="fontclass">.permidentity</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xecb1;</i>
                    <div class="name">plus_one</div>
                    <div class="code">&amp;#xecb1;</div>
                    <div class="fontclass">.plusone</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xecae;</i>
                    <div class="name">playlist_add</div>
                    <div class="code">&amp;#xecae;</div>
                    <div class="fontclass">.playlistadd</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xecb0;</i>
                    <div class="name">playlist_play</div>
                    <div class="code">&amp;#xecb0;</div>
                    <div class="fontclass">.playlistplay</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeca9;</i>
                    <div class="name">place</div>
                    <div class="code">&amp;#xeca9;</div>
                    <div class="fontclass">.place</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeca3;</i>
                    <div class="name">power</div>
                    <div class="code">&amp;#xeca3;</div>
                    <div class="fontclass">.power</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xecc1;</i>
                    <div class="name">queue_music</div>
                    <div class="code">&amp;#xecc1;</div>
                    <div class="fontclass">.queuemusic</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xecb8;</i>
                    <div class="name">refresh</div>
                    <div class="code">&amp;#xecb8;</div>
                    <div class="fontclass">.refresh</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xecb9;</i>
                    <div class="name">remove</div>
                    <div class="code">&amp;#xecb9;</div>
                    <div class="fontclass">.remove</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xecd5;</i>
                    <div class="name">replay</div>
                    <div class="code">&amp;#xecd5;</div>
                    <div class="fontclass">.replay</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xecb7;</i>
                    <div class="name">redo</div>
                    <div class="code">&amp;#xecb7;</div>
                    <div class="fontclass">.redo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xeccf;</i>
                    <div class="name">remove_circle_outline</div>
                    <div class="code">&amp;#xeccf;</div>
                    <div class="fontclass">.removecircleoutline</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xecce;</i>
                    <div class="name">remove_circle</div>
                    <div class="code">&amp;#xecce;</div>
                    <div class="fontclass">.removecircle</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xecd2;</i>
                    <div class="name">reorder</div>
                    <div class="code">&amp;#xecd2;</div>
                    <div class="fontclass">.reorder</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xecd9;</i>
                    <div class="name">reply</div>
                    <div class="code">&amp;#xecd9;</div>
                    <div class="fontclass">.reply</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xecda;</i>
                    <div class="name">reply_all</div>
                    <div class="code">&amp;#xecda;</div>
                    <div class="fontclass">.replyall</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xece1;</i>
                    <div class="name">search</div>
                    <div class="code">&amp;#xece1;</div>
                    <div class="fontclass">.search</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xece0;</i>
                    <div class="name">sd_storage</div>
                    <div class="code">&amp;#xece0;</div>
                    <div class="fontclass">.sdstorage</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xecdf;</i>
                    <div class="name">sd_card</div>
                    <div class="code">&amp;#xecdf;</div>
                    <div class="fontclass">.sdcard</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xecf1;</i>
                    <div class="name">screen_rotation</div>
                    <div class="code">&amp;#xecf1;</div>
                    <div class="fontclass">.screenrotation</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xece6;</i>
                    <div class="name">router</div>
                    <div class="code">&amp;#xece6;</div>
                    <div class="fontclass">.router</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed03;</i>
                    <div class="name">settings_input_hdmi</div>
                    <div class="code">&amp;#xed03;</div>
                    <div class="fontclass">.settingsinputhdmi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xecf8;</i>
                    <div class="name">send</div>
                    <div class="code">&amp;#xecf8;</div>
                    <div class="fontclass">.send</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed0f;</i>
                    <div class="name">shopping_cart</div>
                    <div class="code">&amp;#xed0f;</div>
                    <div class="fontclass">.shoppingcart</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xecf6;</i>
                    <div class="name">security</div>
                    <div class="code">&amp;#xecf6;</div>
                    <div class="fontclass">.security</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed08;</i>
                    <div class="name">skip_next</div>
                    <div class="code">&amp;#xed08;</div>
                    <div class="fontclass">.skipnext</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed09;</i>
                    <div class="name">skip_previous</div>
                    <div class="code">&amp;#xed09;</div>
                    <div class="fontclass">.skipprevious</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed0a;</i>
                    <div class="name">settings_voice</div>
                    <div class="code">&amp;#xed0a;</div>
                    <div class="fontclass">.settingsvoice</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed0b;</i>
                    <div class="name">share</div>
                    <div class="code">&amp;#xed0b;</div>
                    <div class="fontclass">.share</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed0c;</i>
                    <div class="name">shop</div>
                    <div class="code">&amp;#xed0c;</div>
                    <div class="fontclass">.shop</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed0e;</i>
                    <div class="name">shopping_basket</div>
                    <div class="code">&amp;#xed0e;</div>
                    <div class="fontclass">.shoppingbasket</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed28;</i>
                    <div class="name">spa</div>
                    <div class="code">&amp;#xed28;</div>
                    <div class="fontclass">.spa</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed26;</i>
                    <div class="name">sort</div>
                    <div class="code">&amp;#xed26;</div>
                    <div class="fontclass">.sort</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed1d;</i>
                    <div class="name">star_outline</div>
                    <div class="code">&amp;#xed1d;</div>
                    <div class="fontclass">.staroutline</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed1b;</i>
                    <div class="name">star</div>
                    <div class="code">&amp;#xed1b;</div>
                    <div class="fontclass">.star</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed1c;</i>
                    <div class="name">star_half</div>
                    <div class="code">&amp;#xed1c;</div>
                    <div class="fontclass">.starhalf</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed32;</i>
                    <div class="name">stars</div>
                    <div class="code">&amp;#xed32;</div>
                    <div class="fontclass">.stars</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed30;</i>
                    <div class="name">supervisor_account</div>
                    <div class="code">&amp;#xed30;</div>
                    <div class="fontclass">.supervisoraccount</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed42;</i>
                    <div class="name">tag_faces</div>
                    <div class="code">&amp;#xed42;</div>
                    <div class="fontclass">.tagfaces</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed46;</i>
                    <div class="name">swap_calls</div>
                    <div class="code">&amp;#xed46;</div>
                    <div class="fontclass">.swapcalls</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed47;</i>
                    <div class="name">swap_horiz</div>
                    <div class="code">&amp;#xed47;</div>
                    <div class="fontclass">.swaphoriz</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed48;</i>
                    <div class="name">swap_vert</div>
                    <div class="code">&amp;#xed48;</div>
                    <div class="fontclass">.swapvert</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed49;</i>
                    <div class="name">swap_vertical_circle</div>
                    <div class="code">&amp;#xed49;</div>
                    <div class="fontclass">.swapverticalcircle</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed4a;</i>
                    <div class="name">switch_camera</div>
                    <div class="code">&amp;#xed4a;</div>
                    <div class="fontclass">.switchcamera</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed4c;</i>
                    <div class="name">sync</div>
                    <div class="code">&amp;#xed4c;</div>
                    <div class="fontclass">.sync</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed67;</i>
                    <div class="name">toc</div>
                    <div class="code">&amp;#xed67;</div>
                    <div class="fontclass">.toc</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed64;</i>
                    <div class="name">timer_3</div>
                    <div class="code">&amp;#xed64;</div>
                    <div class="fontclass">.timer3</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed65;</i>
                    <div class="name">timer_10</div>
                    <div class="code">&amp;#xed65;</div>
                    <div class="fontclass">.timer10</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed63;</i>
                    <div class="name">timer</div>
                    <div class="code">&amp;#xed63;</div>
                    <div class="fontclass">.timer</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed60;</i>
                    <div class="name">time_to_leave</div>
                    <div class="code">&amp;#xed60;</div>
                    <div class="fontclass">.timetoleave</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed5c;</i>
                    <div class="name">theaters</div>
                    <div class="code">&amp;#xed5c;</div>
                    <div class="fontclass">.theaters</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed7c;</i>
                    <div class="name">unfold_more</div>
                    <div class="code">&amp;#xed7c;</div>
                    <div class="fontclass">.unfoldmore</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed7b;</i>
                    <div class="name">unfold_less</div>
                    <div class="code">&amp;#xed7b;</div>
                    <div class="fontclass">.unfoldless</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed78;</i>
                    <div class="name">tv</div>
                    <div class="code">&amp;#xed78;</div>
                    <div class="fontclass">.tv</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed77;</i>
                    <div class="name">turned_in_not</div>
                    <div class="code">&amp;#xed77;</div>
                    <div class="fontclass">.turnedinnot</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed76;</i>
                    <div class="name">turned_in</div>
                    <div class="code">&amp;#xed76;</div>
                    <div class="fontclass">.turnedin</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed6a;</i>
                    <div class="name">usb</div>
                    <div class="code">&amp;#xed6a;</div>
                    <div class="fontclass">.usb</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed90;</i>
                    <div class="name">view_list</div>
                    <div class="code">&amp;#xed90;</div>
                    <div class="fontclass">.viewlist</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed91;</i>
                    <div class="name">view_module</div>
                    <div class="code">&amp;#xed91;</div>
                    <div class="fontclass">.viewmodule</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed8c;</i>
                    <div class="name">view_comfortable</div>
                    <div class="code">&amp;#xed8c;</div>
                    <div class="fontclass">.viewcomfortable</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed8f;</i>
                    <div class="name">view_headline</div>
                    <div class="code">&amp;#xed8f;</div>
                    <div class="fontclass">.viewheadline</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xedaf;</i>
                    <div class="name">zoom_in</div>
                    <div class="code">&amp;#xedaf;</div>
                    <div class="fontclass">.zoomin</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xedb0;</i>
                    <div class="name">zoom_out</div>
                    <div class="code">&amp;#xedb0;</div>
                    <div class="fontclass">.zoomout</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed99;</i>
                    <div class="name">voicemail</div>
                    <div class="code">&amp;#xed99;</div>
                    <div class="fontclass">.voicemail</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed9a;</i>
                    <div class="name">volume_down</div>
                    <div class="code">&amp;#xed9a;</div>
                    <div class="fontclass">.volumedown</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed9b;</i>
                    <div class="name">volume_mute</div>
                    <div class="code">&amp;#xed9b;</div>
                    <div class="fontclass">.volumemute</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed9c;</i>
                    <div class="name">volume_off</div>
                    <div class="code">&amp;#xed9c;</div>
                    <div class="fontclass">.volumeoff</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xed9d;</i>
                    <div class="name">volume_up</div>
                    <div class="code">&amp;#xed9d;</div>
                    <div class="fontclass">.volumeup</div>
                </li>
            
        </ul>


        <div class="helps">
            第一步：使用font-face声明字体
            <pre>
@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
</pre>
第二步：定义使用iconfont的样式
            <pre>
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
</pre>
第三步：挑选相应图标并获取字体编码，应用于页面
<pre>
&lt;i class="iconfont"&gt;&amp;#x33;&lt;/i&gt;
</pre>
        </div>

    </div>
</body>
</html>
